<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="box-hd">
    <!-- 订单标题部分: 我的订单 -->
    <h1 class="title">
        我的订单
        <small>

            <a href="">请谨防钓鱼链接或诈骗电话，了解更多></a>
        </small>
    </h1>
    <!-- 全部有效订单--待支付--待收货--订单回收站 -->
    <div class="more">
        <div class="filter-list">
            <ul>

                <li class="line_order" onclick="javascript:select_status(this)"
                    <c:if test="${chooseStatus==-1}">style="color: #ff6700" </c:if> value="-1">
                    <a>全部有效订单</a>
                </li>
                <input type="hidden" value="${chooseStatus}" id="orderstatus">
                <c:forEach items="${orderStatusList}" var="os">
                    <li class="line_order" onclick="javascript:select_status(this)"
                        <c:if test="${chooseStatus==os.orderStatus}">style="color: #ff6700" </c:if>
                        value="${os.orderStatus}">
                        <a>${os.orderStatusName}</a>
                    </li>
                </c:forEach>

            </ul>
        </div>
        <div class="search-form">
            <input type="text" name="keywords" placeholder="输入订单号" class="search-text" value="${ordernum}"
                   id="ordernum">
            <input type="button" value="&#xeafe;" class="search-btn iconfont" onclick="search_order()"
                   style="font-size: 35px;cursor: pointer">
        </div>
    </div>
</div>
<div class="box-bd">

    <div>
        <div id="show_order" >
            <c:forEach items="${ordersPageInfo.list}" var="everyo" varStatus="o">
                <!-- 订单个数 -->
                <ul class="order-list">
                    <li class="uc-order-item">
                        <div class="order-detail">


                            <div class="order-summary">

                                <div class="order-status"<c:if test="${everyo.orderStatus!=1}">style="display: none" </c:if><c:if test="${everyo.orderStatus==1}">style="display: block" </c:if>>
                                    等待付款
                                </div>
                                <div class="order-status"<c:if test="${everyo.orderStatus==2}">style="display: block;color: #9d9d9d;"</c:if><c:if test="${everyo.orderStatus!=2}">style="display: none;"</c:if>>
                                    等待收货
                                </div>
                                <div class="order-status"<c:if test="${everyo.orderStatus==4}">style="display: block;color: #9d9d9d;"</c:if><c:if test="${everyo.orderStatus!=4}">style="display: none"</c:if>>
                                    已收货
                                </div>
                                <div class="order-status"<c:if test="${everyo.orderStatus==3}">style="display: block;color: #9d9d9d;"</c:if><c:if test="${everyo.orderStatus!=3}">style="display: none"</c:if>>
                                    订单已删除
                                </div>
                            </div>
                            <table class="order-detail-table">
                                <!-- 付款时间金额等 -->
                                <thead>
                                <tr>
                                    <th>
                                        <p class="caption-info">
                                                ${everyo.createTime}
                                            <span class="sep">|</span>
                                                ${user.userName}
                                            <span class="sep">|</span>
                                            订单号:
                                            <a href="">${everyo.orderNumber}</a>
                                            <span class="sep">|</span>
                                            在线支付
                                        </p>
                                    </th>
                                    <th class="col-sub">
                                        <p>
                                            应付金额:
                                            <span class="num">
                                                    ${everyo.orderAmount}
                                            </span>
                                            元
                                        </p>
                                    </th>
                                </tr>
                                </thead>

                                <!-- 订单商品 -->

                                <tbody>
                                <tr>
                                    <!-- 左侧订单商品 -->
                                    <td class="order-items">

                                        <ul class="goods-list">

                                            <c:forEach items="${orderdetailList.get(o.index)}"
                                                       var="everyod"
                                                       varStatus="od">
                                                <li>

                                                    <div class="figure-thumb">
                                                        <a href="">
                                                            <img src="${orderdetailList.get(o.index).get(od.index).picImg}"
                                                                 alt="" width="80px" height="80px"/>

                                                        </a>
                                                    </div>
                                                    <p class="name">
                                                        <a href="" target="_blank">
                                                                ${orderdetailList.get(o.index).get(od.index).productSpecName}

                                                        </a>
                                                    </p>
                                                    <p class="price">
                                                            ${orderdetailList.get(o.index).get(od.index).price}元
                                                        x ${orderdetailList.get(o.index).get(od.index).buyNumber}
                                                    </p>
                                                </li>
                                            </c:forEach>

                                        </ul>

                                    </td>

                                    <!-- 右侧立即付款+订单详情 -->
                                    <td class="order_actions">
                                        <a href="/mi/buy/goToBuy?orderId=${everyo.orderId}" target="_blank" <c:if test="${everyo.orderStatus==1}">style="display: block"</c:if><c:if test="${everyo.orderStatus!=1}">style="display: none"</c:if>
                                           class="btn btn-small btn-primary">立即付款</a>

                                        <a href="javascript:detail_order(${everyo.orderId})"
                                           class="btn btn-small btn-line-gray">订单详情</a>

                                        <a href="" class="btn btn-small btn-line-gray">联系客服</a>
                                    </td>
                                </tr>
                                </tbody>

                            </table>

                        </div>

                    </li>
                </ul>

            </c:forEach>
        </div>
        <!-- 分页 -->
        <ul class="mi-pagenav">

            <c:if test="${ordersPageInfo.pageNum<=1}">
                <li class="numbers disabled">
                    <a><span class="ico">&LeftAngleBracket;</span></a>
                </li>
            </c:if>

            <c:if test="${ordersPageInfo.pageNum>1}">
                <li class="numbers">
                    <a href="javascript:next_page(${ordersPageInfo.pageNum-1})"><span
                            class="ico">&LeftAngleBracket;</span></a>
                </li>
            </c:if>
            <!-- 页数 -->
            <%--                            处理标签的begin和end--%>
            <c:if test="${ordersPageInfo.pageNum+1>=ordersPageInfo.pages}">
                <c:set var="startPage" value="${ordersPageInfo.pages-1}"></c:set>
                <c:set var="endPage" value="${ordersPageInfo.pages}"></c:set>
            </c:if>
            <c:if test="${ordersPageInfo.pageNum+1<ordersPageInfo.pages}">
                <c:set var="startPage" value="${ordersPageInfo.pageNum}"></c:set>
                <c:set var="endPage" value="${ordersPageInfo.pageNum+1}"></c:set>
            </c:if>
            <c:forEach begin="${startPage<=0?1:startPage}" end="${endPage}" var="v">
                <c:if test="${ordersPageInfo.pageNum==v}">
                    <li class="numbers current"><a href="javascript:next_page(${v})">${v}</a></li>
                </c:if>
                <c:if test="${ordersPageInfo.pageNum!=v}">
                    <li class="numbers"><a href="javascript:next_page(${v})">${v}</a></li>
                </c:if>
            </c:forEach>
            <c:if test="${ordersPageInfo.pageNum>=ordersPageInfo.pages}">
                <li class="numbers disabled text-danger">
                    <a><span class="ico">&RightAngleBracket;</span></a>
                </li>
            </c:if>
            <c:if test="${ordersPageInfo.pageNum<ordersPageInfo.pages}">
                <li class="numbers">
                    <a href="javascript:next_page(${ordersPageInfo.pageNum+1})"><span
                            class="ico">&RightAngleBracket;</span></a>
                </li>
            </c:if>

        </ul>
    </div>
</div>